// 子父传值
// 父组件

Vue.component('father', {
	template: `
		<div>
			<son @show-balance='showBalance'></son>
			<p v-if='show'>您的余额为 {{money}} 元</p>
		</div>
	`,
	data: function () {
		return {
			show: false,
			money: 0
		}
	},
	methods: {
		showBalance: function(data) {
			this.show = true;
			console.log(data);
			this.money = data.money;
		}
	}
})

// 子组件
Vue.component('son', {
	template: `
		<button @click='onClick()'>显示余额按钮</button>
	`,
	methods: {
		onClick() {
			this.$emit('show-balance', { money: 2 });
		}
	}
})

new Vue({
	el: '#app',
})

// 首先定义父组件和子组件
// 注意语法格式
// 父组件中调用子组件的方法是直接引用
// 子组件传参给父组件需要用到$emit, 第一个参数为触发事件名, 第二个参数为传递参数
// 因为是组件实例触发事件, 所以组件中需要指定this(实例)触发
// 父组件接收传递的值需要在引用子组件的地方绑定$emit的自定义事件函数, 这里的@show-balance='showBalance'
// 注意调用的函数没有加括号, 不然会出错, 传入的对象在下面的methods中作为函数的参数传入, 然后保存在父组件实例的data即可